<template>
<div class="">
    <!-- 标题栏 -->
    <cjcNav title="建言献策" custom='true' @customRouter="customRouter">
        <div class="headRightTop" @click="isNullContent">发布</div>
    </cjcNav>
    <!-- 内容 -->
    <div class="stufy-home">
        <div class="public-item eventType">
            <div class="publicItem-title">类型：</div>
            <div class="selectType" @click="selectTypeList = true">
                <div class="selectItem" v-if="selecName == ''">
                    点击选择类型
                </div>
                <div class="selectItem" v-else>
                    {{selecName}}
                </div>
                <Icon type="ios-arrow-forward" size="20" color="#999999"></Icon>
            </div>
            <Modal
                v-model="selectTypeList"
                :closable="false"
                :mask-closable="false"
                class-name="vertical-center-modal"
                >
                <p slot="header" style="text-align:center">
                    <span>请选择类型</span>
                </p>
                <RadioGroup 
                    v-model="selectedType"
                    size="large"
                    
                    >
                    <Radio :label="item.TYPE_ID" :key="item.TYPE_ID" v-for="item in this.$store.state.student.getTypeList">
                        <span>{{item.TYPE_CONTENT}}</span>
                    </Radio>
                </RadioGroup>
                <div slot="footer">
                    <Button type="info" size="large"  @click="ok">确定</Button>
                </div>
            </Modal>
        </div>
        <div class="public-item titleInput">
            <div class="publicItem-title">标题：</div>
            <!-- <input class="punlicInput" placeholder="请输入15字以内的标题" v-model="conditionTitle" /> -->
            <Input v-model="conditionTitle" placeholder="请输入15字以内的标题..." :maxlength="15" style="width: 300px" ></Input>
        </div>
        <div class="public-item ">
            <div class="publicItem-title">内容：</div>
            <Input style="margin-top:10px;" v-model="conditionContent" type="textarea" :rows="6" :maxlength="200" placeholder="请输入200字以内的内容..."></Input>
        </div>
        <div class="public-item ">
            <div class="publicItem-upload">上传图片<span class="publicItem-upload-span">选填</span></div>
            <div class="public-upload">
                <div class="upImg">
                    <Upload
                        :show-upload-list="false"
                        :on-success="handleSuccess"
                        :on-error="handleError"
                        :on-preview="onPreview"
                        :on-remove="onRemove"
                        :on-exceeded-size="onExceededSize"
                        :max-size = "5120"
                        :before-upload="beforeUpload"
                        accept="image/*"
                        :action="this.upImg"
                        style="display: inline-block;width:100%;texta-align:left;">
                        <Button type="dashed"  class="shangchuanClick">
                            <Icon type="android-camera" class="styleIcon" size='24'></Icon>
                        </Button>
                    </Upload>
                    
                </div>
                <div class="preImgList">
                    <div v-for="item in preImgList" :key="item">
                        <img :src="Host + '/itfer-qkfy/rest/files/pictures/' + item" class="preImg" @click="preViewImg(item)">
                        <!-- <Icon type="close-circled"  @click.native="preDeleteImg(item)" background="#fff" color="red" size="25" class="Img-delete"></Icon> -->
                        <img src="static/student/remove.png"  @click="preDeleteImg(item)" class="Img-delete"></Icon>
                    </div>
                </div>
            </div>
            
        </div>
        <pinchzoom :src="imgSrc" v-show="visible" @closeImg="closeImg"/>
    </div>
    <Spin size="large" fix v-if="landing"></Spin>
</div>
</template>

<script>
export default {
    name: 'stuHome',
    data() {
        return {
            isNull: false,
            landing: false,
            conditionTitle: '',
            conditionContent: '',
            selectTypeList: false,
            selectedType: '',
            selecName: '',
            visible: false,
            imgSrc: '',
            imgs: '',
            upImg: this.$store.state.Host + '/itfer-qkfy/rest/files/upload',
            src: '',
            picname: '',
            preImgList: [],
            preImgListSrc: '',
            Host: this.$store.state.Host,
        }
    },
    components: {
        cjcNav: () => import('@/components/common/Nav.vue'),
        conditionCard: () => import('@/components/student/conditionCard'),
        pinchzoom: () => import('@/components/common/pinchzoom/pinPage.vue'),
    },
    watch: {
        selectedType() {
            this.$store.state.student.getTypeList.forEach(item => {
                if (item.TYPE_ID === this.selectedType) {
                    this.selecName = item.TYPE_CONTENT
                }
            })
        }
    },
    methods: {
        customRouter() {
            this.$router.push({
                path: 'stuHome'
            })
        },
        ok() {
            this.selectTypeList = false
        },
        isNullContent() {
            let Vm = this
            if (Vm.selectedType === '' || Vm.conditionTitle === '' || Vm.conditionContent === '') {
                Vm.$Message.error('请输入完整信息！')
            } else {
                Vm.pubilcEvent()
            }
        },
        preViewImg(item) {
            console.log(item)
            this.imgSrc = this.Host + '/itfer-qkfy/rest/files/pictures/' + item
            this.visible = true
        },
        preDeleteImg(file) {
            const Vm = this
            let imgsArray = Vm.preImgList
            console.log(imgsArray)
            let tempArray = []
            let imgName = file
            console.log('imgName:' + imgName)
            imgsArray.forEach((item) => {
                if (imgName !== item) {
                    tempArray.push(item)
                }
            })
            console.log(tempArray)
            Vm.preImgList = tempArray
            console.log('Vm.preImgList:' + Vm.preImgList)
        },
        pubilcEvent() {
            let Vm = this
            // let im = Vm.imgs
            // im =
            /**
             * 发布建言献策
             * @userId
             */
            async function setAddEvent() {
                Vm.landing = true
                var imgStr = ''
                if (Vm.preImgList.length !== 0) {
                    for (var indexImg = 0; indexImg < Vm.preImgList.length; indexImg++) {
                        imgStr += Vm.preImgList[indexImg] + ','
                    }
                    imgStr = imgStr.substr(0, imgStr.length - 1)
                } else {
                    imgStr = ''
                }
                let AddEvent = await Vm.$store.dispatch('getAddEvent', {
                    user_id: Vm.$store.state.userInfo.USER_ID,
                    type_id: Vm.selectedType,
                    title: Vm.conditionTitle,
                    content: Vm.conditionContent,
                    imgs: imgStr,
                })
                // console.log(AddEvent)
                console.log(Vm.preImgList)
                Vm.landing = false
                if (AddEvent.data.status === 0) {
                    Vm.$store.commit('SET_getAddEvent', AddEvent.data.result)
                    Vm.$Message.success(AddEvent.data.msg)
                    Vm.$router.push({
                        path: 'stuHome'
                    })
                } else {
                    Vm.$store.commit('SET_getAddEvent', 'noData')
                    Vm.$Message.error(AddEvent.msg)
                }
            }
            setAddEvent()
        },
        // 上传图片
        handleSuccess(response, file, fileList) {
            const Vm = this
            Vm.showList = false
            // console.log(file)
            Vm.imgs += file.response.result[0] + ','
            console.log(Vm.imgs)
            Vm.preImgList.push(file.response.result[0])
            // console.log('List:' + Vm.preImgList)
        },
        handleError(error, file, fileList) {
            const Vm = this
            Vm.$Modal.error({
                title: '错误',
                content: '上传失败了<br>' + error
            })
        },
        beforeUpload(file) {
            const Vm = this
            if (file.size === 0) {
                return false
            }
            Vm.showList = true
            if (Vm.preImgList.length + 1 > 3) {
                Vm.$Message.error('最多只能添加3个文件')
                return false
            }
            console.log(Vm.preImgList.length)
        },
        onExceededSize() {
            this.$Message.error('文件大小不能超过5M')
        },
        onPreview(file) {
            const Vm = this
            Vm.picname = file.response.result[0]
            console.log(Vm.picname)
            Vm.showImg(Vm.$store.state.Host + '/itfer-qkfy/rest/files/pictures/' + Vm.picname)
        },
        showImg(src) {
            this.src = src
            this.visible = true
        },
        closeImg() {
            this.visible = false
        },
        onRemove(file) {
            const Vm = this
            let imgsArray = Vm.imgs.split(',')
            let tempArray = []
            let imgName = file.response.result[0]
            imgsArray.forEach((item) => {
                if (imgName !== item) {
                    tempArray.push(item)
                }
            })
            Vm.imgs = tempArray.join(',')
        },
    },
    created() {
        const Vm = this
        // const State = this.$store.state
        /**
         * 确认用户信息是否加载
         */
        function isUserInfo() {
            return new Promise((resolve, reject) => {
                let isu = setInterval(() => {
                    if (Vm.$store.state.userInfo) {
                        clearInterval(isu)
                        resolve()
                    }
                }, 100)
            })
        }
        /**
         * 获取列表
         * @userId
         */
        // console.log(State.userInfo.USER_ID)
        async function setTypeList() {
            let typeList = await Vm.$store.dispatch('getEventTypeList')
            // console.log(typeList.result)
            if (typeList.status === 0) {
                Vm.$store.commit('SET_getEventTypeList', typeList.result)
            } else {
                Vm.$store.commit('SET_getEventListById', 'noData')
                Vm.$Message.error(typeList.msg)
            }
        }
        // 执行步骤
        async function Step() {
            setTypeList()
        }
        isUserInfo().then(() => {
            Step()
        })
    }
}
</script>

<style lang="less">
.stufy-home {
    height: 100%;
    width: 100%;
}
.headRightTop {
    font-size: 16px;
    color: #0093dd;
    margin-right: 10px;
    height: 100%;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.public-item {
    width: 100%;
    background-color: #ffffff;
    padding: 15px;
    font-size: 16px;
    line-height: 23px;
    font-weight: bold;
    margin-bottom: 20px;
    
}
.publicItem-upload-span {
    font-weight: normal;
    font-size: 14px;
    margin-left: 10px;
    color:#999999;
}
.eventType {
    display: flex;
    // justify-content: space-between;
    align-items: center;

}
.selectType {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
}
.titleInput {
    display: flex;
    // justify-content: center;
    align-items: center;
    
}
.punlicInput {
    // margin-left: 10px;
    border: 1px solid #dddee1;
    color: #666;
    padding: 0 5px;
    border-radius: 4px;
    transition: all .2s linear;
    // height: 36px;
    // line-height: 36px;
    // width: 250px;
}
.punlicInput::-webkit-input-placeholder {
    color: #999999; 
}
:-moz-placeholder{
    color: #999999; 
}
::-moz-placeholder{
    color: #999999; 
}
:-ms-input-placeholder{
    color: #999999; 
}
.publicItem-title {
    width:30%;
}
.publicItem-upload {
    width:100%;
    display: flex;

}
.public-upload {
    margin-top: 20px;
}
.selectItem {
    font-size: 14px;
    color:#666;
}
.upImg {
    width:80px;
    height:80px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.shangchuanClick {
    height: 70px;
    width: 70px;
    // display: flex;
    text-align: center;
    // margin-top: 30px;
}
.upImg {
    // display: flex;
    // align-items: center;
    // flex-direction: row;
}
.preImgList {
    // position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    div{
        position: relative;
    }
}
.preImg {
    width: 70px !important;
    height: 70px !important;
    margin-right: 15px;
    padding: 2px;
    border: 1px solid #eeeeee;
    background-color: #fff;
    border-radius: 5px;
    position: relative;
}
.Img-delete {
    display: inline-block;
    position: absolute;
    top: -5px;
    right: 6px;
    width: 18px;
    height: 18px;
    // background-color: red;
    // border-radius: 50%;
    // color:#fff;
    // display: flex;
    // justify-content: center;
    // align-items: center;
}
.styleIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    // padding-bottom: 25px;
}
.ivu-modal-body {
    line-height: 2.5;
    text-align: center;
}
// .ivu-modal {
//     width: 300px !important;
//     display: flex;
//     justify-content: center;
//     align-items: center;
// }
.vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal{
        top: 0;
        width: 300px !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
